<template>
  <div class="crumb-nav" v-for="(item,index) in data" :key="index">
      <span  :style="{color: index===data.length-1?activeColor:color,cursor:index===data.length-1?'':'pointer', fontSize:textSize,fontWeight:bold?'bold':'normal'}"
        @click="itemClick(item, index)">{{item.name}}</span>
      <span v-if="index!=data.length-1" type="right" color="#8799a3" class="margin-lr-xs">></span>
  </div>
</template>
<script>
  export default {
    name: "crumb-nav",
    data() {
      return {
      };
    },
    methods: {
      itemClick(item, index) {
        // console.log("click crumb item:" + index);
        this.$emit('click', item, index);
      }
    },
    props: {
      data: Array,
      activeColor: {
        default: "#666666",
        type: String
      },
      color: {
        default: "#0081ff",
        type: String
      },
      bold: {
        default: false,
        type: Boolean
      },
      textSize: {
        default: "15px",
        type: String
      }
    }
  }
</script>

<style lang="scss">
.crumb-nav {
  padding: 20rpx;
  line-height: 1.5em;
}
</style>
